    /* 
基础颜色参考

黑白色：hsl(0，0，？%)
		5 20 35 50 90 95 99 100

红色：hsl(0,100%,65%)
蓝色：hsl(215,100%,65%)
*/

    :root {
        --bg-color: hsl(0, 0%, 25%);
        --write-bg: hsl(0, 0%, 25%);
        --link-bg: transparent;
        --mark-bg: hsl(100, 100%, 85%);
        --codeb-bg: hsl(200, 19%, 18%);
        --code-bg: hsl(0, 100%, 5%);
        --quota-bg: hsl(0, 0%, 5%);
        --thead-bg: hsl(0, 0%, 10%);
        --tbody-bg: hsl(0, 0%, 4%);
        --text-color: hsl(0, 0%, 80%);
        --title-color: hsl(0, 0%, 95%);
        --link-color: hsl(100, 100%, 75%);
        --mark-color: hsl(0, 0%, 20%);
        --code-color: hsl(0, 0%, 80%);
        --codeb-color: hsl(0, 0%, 50%);
        --quota-color: hsl(0, 0%, 65%);
        --footer-color: hsl(0, 0%, 50%);
        --md-char-color: hsl(100, 100%, 65%);
        --meta-content-color: hsl(0, 0%, 50%);
        --link-hover: hsl(100, 100%, 65%);
        --thead-hover: hsl(0, 0%, 25%);
        --tbody-hover: hsl(0, 0%, 25%);

        --window-border: 1px solid hsl(0, 0%, 5%);
        --base-border: 1px solid hsl(100, 100%, 65%);
        --base-borderl: 4px solid hsl(100, 100%, 65%);
        --base-borderb: 1px dashed hsl(100, 100%, 65%);
        --opt-borderb: 1px dashed hsl(215, 100%, 65%);

        --box-shadow: 0px 20px 40px 1px hsla(0, 0%, 0%, 0.3);
        --img-shadow: 0px 20px 40px 1px hsla(0, 0%, 0%, 0.3);
        --code-shadow: 0px 20px 40px 1px hsla(0, 0%, 0%, 0.3);
        --quota-shadow: 0px 20px 40px 1px hsla(0, 0%, 0%, 0.3);

        /* 字体样式援引自 font.css */
        --base-font: -apple-system, "Noto Sans CJK SC", "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

        --title-font: "Noto Serif CJK TC", Georgia, "Nimbus Roman No9 L", "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;

        --em-font: Georgia, "Noto Serif CJK SC", "Nimbus Roman No9 L", "Songti SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;

        /* --quota-font: "Noto Serif CJK SC", Georgia, "Nimbus Roman No9 L", "Songti SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif; */

        --quota-font: Georgia, Baskerville, "Liberation Serif", "TW-Kai", '仓耳今楷05-6763', "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;

        --code-font: "Cascadia code", "Sarasa Term SC", Monaco, "Deja Vu Sans Mono", Consolas, "Lucida Console", "Andale Mono", Courier;
    }


    /* 部分样式，如重置元素样式等援自 typo.css */
    /* 部分样式，如 -webkit、-moz 等援自 han.css */
    /* 目录自动编码样式根据官网范例进行些许改动 */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-rendering: optimizelegibility;
        -webkit-font-smoothing: initial;
    }

    html,
    body,
    #write {
        font-family: var(--base-font);
        font-weight: 400;
        font-size: 16px;
        font-size: 1rem;
        line-height: 2rem;
        background: var(--write-bg);
        color: var(--text-color);
    }

    content {
        background-color: var(--write-bg);
        min-width: 640px;
    }

    #write {
        max-width: 960px;
        min-height: calc(100vh - 6rem);
        min-width: calc(100vw - 45rem);
        padding: 3rem 4rem;
        text-align: justify;
    }

    /* 目录自动编号 */

    .md-toc {
        font-size: 1.25rem;
        line-height: 1.5rem;
        display: table;
        margin: 2rem 0;
        margin-left: -4rem;
    }
    
    .md-toc::before {
        content: "目录";
        font-family: var(--base-font);
        font-size: 2rem;
        font-weight: 200;
        text-align: center;
        display: block;
        float: left;
        padding: 8rem;
        padding-top: 2rem;
        background: linear-gradient(-40deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%) 40px;
    }
    
    .md-toc-content {
        float: right;
    }
    
    .md-toc-item {
        display: list-item;
        list-style: none;
        height: 1.5rem;
        width: 100%;
        font-family: var(--title-font);
        font-weight: 200;
        vertical-align: baseline;
    }
    
    .md-toc-item .md-toc-inner {
        padding-left: 2rem;
    }
    
    .md-toc-h1,
    .md-toc-h2,
    .md-toc-h3,
    .md-toc-h4 {
        margin: .75rem;
    }

    .md-toc-h2 {
        margin-left: 1rem;
    }

    .md-toc-h3,
    .md-toc-h4 {
        margin-left: 4rem;
    }

    .md-toc-item .md-toc-inner {
        text-decoration: none;
        color: var(--text-color);
        border-bottom: none !important;
        display: table-cell;
        vertical-align: baseline;
        padding-left: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .md-toc-h1 .md-toc-inner,
    .md-toc-h2 .md-toc-inner,
    .md-toc-h3 .md-toc-inner,
    .md-toc-h4 .md-toc-inner {
        margin-left: 1rem !important;
        word-wrap: normal;
        word-break: break-all;
    }

    .md-toc-h1 {
        counter-increment: counter_md-toc-h1;
        counter-reset: counter_md-toc-h2;
        font: 400 1.3rem var(--title-font);
        margin-top: 4rem;
    }
    
    .md-toc-h1:before {
        content: "第"counter(counter_md-toc-h1, cjk-ideographic)"章";
    }
    
    .md-toc-h2 {
        counter-increment: counter_md-toc-h2;
        counter-reset: counter_md-toc-h3;
        margin-left: 8rem;
        margin-top: 2rem;
        font-size: 1.2rem;
    }
    
    .md-toc-h2::before {
        content: "第"counter(counter_md-toc-h2, cjk-ideographic)"节";
    }
    
    .md-toc-h3 {
        counter-increment: counter_md-toc-h3;
        counter-reset: counter_md-toc-h4;
    }
    
    .md-toc-h3::before {
        content: counter(counter_md-toc-h3);
    }
    
    .md-toc-h4 {
        counter-increment: counter_md-toc-h4;
        counter-reset: counter_md-toc-h5;
    }
    
    .md-toc-h3,
    .md-toc-h4 {
        margin-left: 15rem;
        font-size: 1rem;
    }
    
    .md-toc-h4::before {
        content: counter(counter_md-toc-h3)"."counter(counter_md-toc-h4);
    }

    .md-toc-h5 {
        counter-increment: counter_md-toc-h5;
        counter-reset: counter_md-toc-h6;
    }

    .md-toc-h5::before {
        content: counter(counter_md-toc-h3)"."counter(counter_md-toc-h4)"."counter(counter_md-toc-h5);
    }

    .md-toc-h6 {
        counter-increment: counter_md-toc-h6;
        counter-reset: counter_md-toc-h7;
    }

    .md-toc-h6::before {
        content: counter(counter_md-toc-h3)"."counter(counter_md-toc-h4)"."counter(counter_md-toc-h5)"."counter(counter_md-toc-h6);
    }

    .md-toc-h1 *,
    .md-toc-h2 *,
    .md-toc-h3 *,
    .md-toc-h4 * {
        background: none;
        text-transform: capitalize;
        font-size: inherit;
        font-family: inherit;
    }
    
    .md-toc-h1:before,
    .md-toc-h2::before,
    .md-toc-h3::before,
    .md-toc-h4::before,
    .md-toc-h5::before,
    .md-toc-h6::before {
        color: initial;
        display: table-cell;
        vertical-align: baseline;
        font-size: 1.2rem !important;
        font-family: var(--base-font);
        font-weight: 200;
    }

    .md-toc-h1:before,
    .md-toc-h2::before {
        text-align-last: justify;
    }

    .md-toc-h3::before,
    .md-toc-h4::before,
    .md-toc-h5::before,
    .md-toc-h6::before {
        text-align: right;
    }

    .md-toc-h5,
    .md-toc-h6 {
        display: none;
    }

    /* 内外边距通常让各个浏览器样式的表现位置不同 */
    body,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    hr,
    button,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    menu,
    nav,
    section {
        margin: 0;
        padding: 0;
    }

    /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    menu,
    nav,
    section {
        display: block;
    }

    /* HTML5 媒体文件跟 img 保持一致 */
    audio,
    canvas,
    video {
        display: inline-block;
    }

    /* 要注意表单元素并不继承父级 font 的问题 */
    body,
    button,
    input,
    select,
    textarea {
        font: 400 1em/1.75 var(--base-font);
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    /* 去掉各Table cell 的边距并让其边重合 */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* 去除默认边框 */
    fieldset,
    img {
        border: 0;
    }

    /* 标题样式 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--title-color);
    }

    /* 使标题下所有的元素显示为标题样式 */
    #write h1 *,
    #write h2 *,
    #write h3 *,
    #write h4 *,
    #write h5 *,
    #write h6 * {
        color: var(--title-color) !important;
        text-decoration: none !important;
        border-bottom: none !important;
    }

    /* 让每一级标题更加明显，添加标注 */
    #write h1 {
        font-size: 3rem;
        margin-top: 6rem;
        margin-bottom: 3rem;
    }

    #write h1:before,
    #write h1:after {
        content: "";
        display: block;
        position: relative;
        width: 50%;
        margin: 1rem auto;
    }

    #write h1::before {
        top: -1.5rem;
        border-top: var(--opt-borderb);
    }

    #write h1::after {
        top: 1.5rem;
        border-top: var(--base-borderb);
    }

    #write h1,
    #write h2 {
        font-family: var(--title-font);
        font-weight: 800;
        line-height: 3rem;
        text-align: center;
        text-transform: uppercase;
    }

    #write h2 {
        font-size: 2rem;
        margin: 4rem auto;
        margin-bottom: 2rem;
    }

    #write h3 {
        font-size: 1.75rem;
    }

    #write h4 {
        font-size: 1.5rem;
    }

    #write h5,
    #write h6 {
        font-size: 1.25rem;
    }

    #write h3,
    #write h4,
    #write h5,
    #write h6 {
        font-family: var(--base-font);
        font-weight: 600;
        margin: 3rem 0;
        margin-bottom: 1.5rem;
    }

    #write h3::before,
    #write h4::before,
    #write h5::before,
    #write h6::before {
        font-size: .9rem !important;
        vertical-align: bottom;
        margin-right: .5rem;
        padding: 2px;
        border-radius: 3px;
        background: var(--text-color);
        color: var(--write-bg);
    }

    #write h3::before {
        content: "H3";
    }

    #write h4::before {
        content: "H4";
    }

    #write h5::before {
        content: "H5";
    }

    #write h6::before {
        content: "H6";
    }

    p {
        margin-bottom: 1rem;
    }

    /* 超链接样式 */

    a,
    ins {
        color: var(--link-color);
        text-decoration: none;
    }

    #write a {
        border-bottom: var(--base-borderb);
    }

    #write a:hover {
        border-bottom-color: var(--link-color);
        color: var(--link-hover);
        text-decoration: none;
    }

    /* em & strong style */

    #write strong,
    #write em {
        font-family: var(--em-font);
        font-weight: 800 !important;
        color: var(--title-color);
    }

    #write em {
        text-decoration: underline dotted;
    }

    /* mark style */

    mark {
        margin: 0 5px;
        color: var(--mark-color);
        padding: 1px 4px;
        border-radius: 5px;
        background-color: var(--mark-bg);
    }

    /* code style */

    /* yaml style */
    #write pre.md-meta-block {
        min-height: 30px;
        background: var(--codeb-bg);
        color: var(--codeb-color);
        font-weight: 300;
        position: sticky;
        padding: 1.5rem;
        margin-top: -1.5rem;
        margin-bottom: 2rem;
        border-radius: 5px;
        line-height: 1.5rem;
    }


    /* code & codeblock style */

    /* #write pre.md-fences {
border-top: 1px solid var(--codeb-bg);
margin: 2rem auto;
padding: 1rem 0.5rem;
display: block;
-webkit-overflow-scrolling: touch;
} */

    /* codeblock mac style */
    #write pre.md-fences {
        border-top: 2rem solid var(--mark-color);
        margin: 3rem auto;
        padding: 1rem 0.5rem 1rem;
        display: block;
        -webkit-overflow-scrolling: touch;
        box-shadow: var(--code-shadow);
    }

    pre.md-fences:before {
        background: #fc625d;
        box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
        left: 15px;
        margin-top: -2.3rem;
        position: absolute;
        border-radius: 50%;
        content: ' ';
        height: 12px;
        width: 12px;
    }

    pre,
    code,
    pre tt,
    .md-fences,
    .CodeMirror pre {
        font-family: var(--code-font);
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 2px 4px;
        border-radius: 5px;
        background-color: var(--codeb-bg);
    }

    /* code style */
    code {
        background-color: var(--code-bg);
    }

    kbd,
    samp,
    tt,
    var {
        font-family: var(--code-font);
    }

    /* 代码块下的标题颜色过深。修改为浅蓝 */
    .cm-s-inner .cm-header,
    .cm-s-inner.cm-header {
        color: hsl(215, 100%, 75%);
    }

    /* 列表样式 */
    ul,
    ol {
        margin: 1.5rem auto;
    }

    #write ul {
        margin-left: 1.5rem;
        list-style: disc;
    }

    #write ol {
        list-style: decimal-leading-zero;
        margin-left: 1.5rem;
    }

    #write ol ol {
        list-style-type: lower-roman;
    }

    #write ul ul {
        list-style-type: circle;
    }

    #write ol ol,
    #write ul ul,
    #write ul ol,
    #write ol ul {
        margin-top: .5rem;
    }

    #write ul li,
    #write ol li,
    #write li ul,
    #write li ol,
    #write ul ul,
    #write ol ol {
        margin-left: 1rem;
    }

    /* todo list */

    .md-task-list-item>input {
        margin-left: -1.5rem;
        top: 5px;
    }

    .md-task-list-item>input::before {
        content: "";
        position: absolute;
        top: -7px;
        left: -4px;
        border-radius: 50%;
        width: 1.3rem;
        height: 1.3rem;
        border: var(--base-border);
        background: #fff;
        -webkit-transition: background-color 200ms ease-in-out;
        transition: background-color 200ms ease-in-out;
    }

    .md-task-list-item>input::after {
        content: "";
        position: absolute;
        top: 0px;
        left: 2px;
        width: 0.6rem;
        height: 0.3rem;
        border: 2px solid #fff;
        border-top: 0;
        border-right: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
        -webkit-transition: opacity 200ms ease-in-out;
        transition: opacity 200ms ease-in-out;
    }

    .md-task-list-item>input:checked::before {
        background-color: var(--link-color);
        border: none;
    }

    .md-task-list-item>input:checked::after {
        opacity: 1;
    }

    .md-task-list-item.task-list-done {
        text-decoration: line-through;
        color: var(--footer-color);
    }

    /* 块/段落引用 */

    blockquote {
        background: var(--quota-bg);
        margin: 3rem auto;
        padding: 2rem 6rem;
        font-size: 1.2rem;
        box-shadow: var(--quota-shadow);
        border-radius: 5px;
    }

    blockquote blockquote {
        padding: 0;
        margin: 0;
        padding-left: 2rem;
        border-left: var(--base-borderl);
        border-radius: 0;
    }

    blockquote,
    blockquote p {
        font-family: var(--quota-font);
    }

    blockquote p {
        color: var(--quota-color);
        line-height: 1.75rem;
    }

    /* 统一引用下其他元素的样式 */

    blockquote h1,
    blockquote h2,
    blockquote h3,
    blockquote h4,
    blockquote h5,
    blockquote h6,
    blockquote em,
    blockquote strong {
        font-family: var(--quota-font) !important;
    }

    /* 一致化 horizontal rule */
    hr {
        border: none;
        border-bottom: 1px solid #999;
        margin: 3rem auto;
        height: 15px;
    }

    /* img */

    #write img {
        margin: 40px auto;
        box-shadow: var(--img-shadow);
        border-radius: 5px;
    }

    /* 使图片去掉阴影 */
    img[alt="no-shadow"] {
        box-shadow: none !important;
    }

    /* 使图片去掉所有效果 */
    img[alt="normal"] {
        margin: 0 !important;
        box-shadow: none !important;
    }


    /* 脚注样式 脚注内的文字颜色应当较原字稍淡 */

    sup.md-footnote {
        padding: 2px;
        background-color: hsla(0, 100%, 85%);
        color: #555;
        cursor: pointer;
        font-size: .75rem;
    }

    .footnotes,
    .footnotes em,
    .footnotes strong {
        color: var(--footer-color);
    }

    .footnotes a {
        color: hsl(215, 100%, 75%);
    }

    /* 表格样式 */

    table {
        margin: 1.5rem auto;
        width: 98%;
    }

    #write table th,
    #write table thead th {
        background: var(--thead-bg);
        padding: .5rem 1rem;
    }

    #write table caption {
        border-bottom: none;
    }

    #write table td {
        background-color: var(--tbody-bg);
        border: 1px solid var(--thead-bg);
        padding: 0.5rem 1rem;
        color: var(--text-color);
    }

    #write tr th:hover {
        background-color: var(--thead-hover);
    }

    #write td:hover {
        background-color: var(--tbody-hover);
    }

    #write th:hover,
    #write td:hover {
        color: var(--link-hover);
    }



    /* 不同的宽度的设备上的字数统计样式 */
    @media screen and (max-width: 600px) {
        #write {
            padding: 2rem 1rem;
        }

        .md-toc {
            padding: 0;
            margin: auto;
        }

        blockquote {
            background: var(--quota-bg);
            margin: 2rem -4rem;
            padding: 2rem 4rem;
        }

        blockquote blockquote {
            padding-left: 1rem;
        }

        #writte figure {
            position: relative;
            left: -2rem;
            min-width: calc(100% + 4rem);
        }

        #write table {
            width: 100%;
        }

        #write h1 {
            font-size: 2.5rem;
        }

        #write h3:before,
        #write h4:before,
        #write h5:before,
        #write h6:before {
            color: var(--bg-color);
        }
    }

    @media screen and (max-width: 800px) {
        .md-toc-inner {
            max-width: 20rem;
        }
    }

    @media screen and (min-width: 1300px) {
        #write {
            box-shadow: var(--box-shadow);
            border-radius: 5px;
        }
    }

    @media screen and (min-width: 1100px) {

        body,
        #footer-word-count-info,
        body.pin-outline,
        .pin-outline #footer-word-count-info,
        .pin-outline footer {
            background: var(--write-bg);
        }


        .typora-node #write {
            min-height: calc(100% - 6rem);
        }


        #write {
            max-width: 1000px;
            padding: 40px 60px;
            background: var(--write-bg);
            margin: 3rem auto 3rem;
            border-width: 0 1px;
        }

        .pin-outline #write {
            max-width: 1000px;
            background: var(--write-bg);
            margin: 0 0 0;
            border: 0;
            padding-left: 60px;
            padding-right: 60px;
        }

        footer {
            background-color: transparent;
        }
    }

    @media screen and (min-width: 1300px) {

        body.pin-outline,
        .pin-outline #footer-word-count-info,
        .pin-outline footer,
        #footer-word-count-info {
            background: var(--write-bg);
        }

        .typora-node #write {
            min-height: calc(100% - 6rem);
        }

        .pin-outline #write {
            min-width: 1100px;
            padding: 40px 60px;
            background: var(--write-bg);
            margin: 3rem auto 3rem;
            border: none;
            border-width: 0 1px;
            border-radius: 5px;
        }

        .pin-outline footer {
            background-color: transparent;
        }

    }


    .MathJax_Display {
        font-size: 0.9rem;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }

    p.mathjax-block,
    .mathjax-block {
        padding-bottom: 0;
    }

    .mathjax-block>.code-tooltip {
        bottom: 5px;
        box-shadow: none;
    }

    .md-image>.md-meta {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .md-image>img {
        margin-top: 2px;
    }

    .md-image>.md-meta:first-of-type:before {
        padding-left: 4px;
    }

    /* 源代码模式 */

    #typora-source {
        background: var(--bg-color);
        color: var(--code-color);
        font-family: var(--code-font);
    }

    #typora-source pre {
        line-height: 1.5rem;
        border-radius: 0px !important;
    }


    /** ui for windows **/

    ::-webkit-scrollbar-corner {
        display: none;
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.05);
        background-clip: padding-box;
    }

    [draggable] {
        cursor: pointer;
    }

    #md-searchpanel {
        border-bottom: var(--base-borderb);
    }

    #md-searchpanel .btn {
        border: var(--base-border);
    }

    #md-notification:before {
        top: 14px;
    }

    #md-notification {
        background: var(--code-bg);
    }

    /* 侧边栏 文件概览和大纲列表 */

    :root {
        --blur-text-color: hsl(100, 100%, 75%);
        --active-file-bg-color: hsl(0, 0%, 1%);
        /* 文件列表 当前文件激活 背景色*/
        --active-file-text-color: hsl(100, 100%, 75%);
        --active-file-border-color: hsl(100, 100%, 75%);
        /* 树形结构下文件激活边框色 */
        --side-bar-bg-color: hsl(0, 0%, 15%);
        /*文件 大纲 侧边栏 背景色*/
        --item-hover-bg-color: hsl(0, 0%, 10%);
        /* 打开文文件夹、正文菜单、最近使用 hover 效果 */
        --item-hover-text-color: inherit;

        --primary-color: hsl(100, 100%, 75%);
        /* color of primary buttons */
        --primary-btn-border-color: hsl(100, 100%, 75%);
        --primary-btn-text-color: hsl(0, 0%, 0%);

        --select-text-bg-color: hsl(100, 100%, 75%);
        --select-text-font-color: hsl(0, 0%, 0%);
        --active-bg: hsl(0, 0%, 5%);
    }

    /* 语法标记样式 */

    .md-expand .md-meta.md-before,
    .md-expand .md-meta.md-after {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 侧边栏文档大纲tab标签 激活 */

    .info-panel-tab:hover {
        color: var(--primary-color);
    }

    /* 侧边栏文档大纲tab标签 激活 */
    .active-tab-outline,
    .active-tab-files {
        color: var(--primary-color);
    }

    /* bugfix */
    #outline-content,
    #file-library {
        color: var(--text-color);
    }

    /* 文件 大纲 激活 */
    .outline-item:hover {
        color: var(--primary-color);
    }

    .file-list-item:hover {
        background-color: var(--item-hover-bg-color);
        color: var(--primary-color);
    }


    /* 大纲目录自动编号 */

    .sidebar-content {

        counter-reset: h1;
    }

    .outline-h1 {
        counter-increment: h1;
        counter-reset: h2;
    }

    .outline-h2 {
        counter-increment: h2;
        counter-reset: h3;
    }

    .outline-h3 {
        counter-increment: h3;
        counter-reset: h4;
    }

    .outline-h4 {
        counter-increment: h4;
        counter-reset: h5;
    }

    .outline-h5 {
        counter-increment: h5;
        counter-reset: h6;
    }

    .outline-h1>.outline-item>.outline-label:before {
        content: "章"counter(h1) " ";
    }

    .outline-h2>.outline-item>.outline-label:before {
        content: "节"counter(h2) " ";
    }

    .outline-h3>.outline-item>.outline-label:before {
        content: counter(h3) " ";
    }

    .outline-h4>.outline-item>.outline-label:before {
        content: counter(h3) "."counter(h4) " ";
    }

    .outline-h5>.outline-item>.outline-label:before {
        content: counter(h3) "."counter(h4) "."counter(h5) " ";
    }

    .outline-h6>.outline-item>.outline-label:before {
        counter-increment: h6;
        content: counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " ";
    }

    /* 书写区右键菜单 */
    /* control-menu */

    .context-menu.dropdown-menu>li>a:focus {
        background-color: var(--active-bg);
    }

    .context-menu.dropdown-menu>.active>a,
    .context-menu.dropdown-menu>li>a:hover,
    .menu-style-btn.active {
        color: var(--primary-color);
    }

    /* 一体化模式下菜单页 */

    /* 菜单侧标栏 */
    .megamenu-menu {
        box-shadow: 2px 2px 5px 0 #33333380, 2px 0px 10px 0 #33333380;
    }

    /* bugfix */
    .megamenu-opened .megamenu-menu {
        left: -1px !important;
    }

    /* 侧边栏item激活 */
    .megamenu-menu-list:not(.saved) li a:hover,
    .megamenu-menu-list li a.active {
        background-color: var(--active-bg);
        color: var(--primary-color);
        display: block !important;
    }

    /* bugfix */
    .megamenu-menu-list li {
        line-height: 48px;
    }

    .megamenu-menu-list li a {
        height: 48px;
    }

    a.menu-style-btn:hover {
        background: var(--active-bg);
    }

    #top-titlebar,
    #top-titlebar * {
        background-color: var(--bg-color);
    }

    .megamenu-content {
        background: var(--bg-color);
    }

    /* 标题 */

    .megamenu-menu-panel h1,
    .megamenu-menu-panel h2 {
        margin: 2rem auto 3rem;
    }

    /* 长形按钮 */
    .long-btn:hover {
        color: var(--primary-color) !important;
    }

    .megamenu-menu-panel .btn {
        border: var(--base-border);
    }

    /* 最近文档 */

    .megamenu-menu-panel table tr {
        background: var(--thead-bg);
    }

    #recent-file-panel tbody tr:nth-child(2n-1) {
        background-color: var(--tbody-bg);
    }

    .megamenu-menu-panel tr:hover,
    .megamenu-menu-panel th:hover,
    .megamenu-menu-panel td:hover {
        background-color: var(--thead-hover) !important;
        color: var(--primary-color) !important;
    }

    /* 主题页 */
    /* 样式预览 */

    .theme-preview-div:hover {
        border-color: #80aaff80;
    }

    .theme-preview-div {
        border: 4px solid #99999950;
    }

    .theme-preview-div.active,
    .theme-preview-div.active:hover {
        border-color: var(--primary-color);
    }

    /* 偏好设定 */

    /* 偏好设定侧边栏 */
    .nav-group-item.active {
        background: var(--item-hover-bg-color) !important;
        color: (var--primary-color);
    }

    /* 关于页 */

    table#typora-help-md-table tr {
        background: transparent;
    }

    /* fix */
    .about-content-meta {
        font-family: var(--title-font);
    }


    /* titlebar */

    #top-titlebar {
        height: 28px;
    }

    #w-traffic-lights {
        display: flex;
        flex-direction: row;
    }

    #w-max-group {
        display: contents;
    }

    /* bugfix */

    footer.stopselect.ty-footer {
        right: 0;
    }

    /* animation */
    #write td,
    #megamenu-content td,
    .file-list-item,
    .megamenu-menu li,
    .btn,
    .long-btn {
        position: relative;
        overflow: hidden;
    }

    #write td:after,
    #megamenu-content td:after,
    .file-list-item:after,
    .megamenu-menu li:after,
    .btn:after,
    .long-btn:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform .3s, opacity .5s;
    }

    #write td:active:after,
    #megamenu-content td:active:after,
    .file-list-item:active:after,
    .megamenu-menu li:active:after,
    .btn:active:after,
    .long-btn:active:after {
        transform: scale(0, 0);
        opacity: .3;
        transition: 0s;
    }



    /* code style */

    /** ported from https://codemirror.net/theme/material.css **/
    /*

Name:       material
Author:     Michael Kaminsky (http://github.com/mkaminsky11)

Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)

*/

    .cm-s-inner {
        background-color: #263238;
        color: rgba(233, 237, 237, 1);
    }

    .cm-s-inner .CodeMirror-gutters {
        background: #263238;
        color: rgb(83, 127, 126);
        border: none;
    }

    .cm-s-inner .CodeMirror-guttermarker,
    .cm-s-inner .CodeMirror-guttermarker-subtle,
    .cm-s-inner .CodeMirror-linenumber {
        color: rgb(83, 127, 126);
    }

    .cm-s-inner .CodeMirror-cursor {
        border-left: 1px solid #f8f8f0;
    }

    .cm-s-inner div.CodeMirror-selected {
        background: rgba(255, 255, 255, 0.15);
    }

    .cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
        background: rgba(255, 255, 255, 0.10);
    }

    .cm-s-inner .CodeMirror-line::selection,
    .cm-s-inner .CodeMirror-line>span::selection,
    .cm-s-inner .CodeMirror-line>span>span::selection {
        background: rgba(255, 255, 255, 0.10);
    }

    .cm-s-inner .CodeMirror-line::-moz-selection,
    .cm-s-inner .CodeMirror-line>span::-moz-selection,
    .cm-s-inner .CodeMirror-line>span>span::-moz-selection {
        background: rgba(255, 255, 255, 0.10);
    }

    .cm-s-inner .CodeMirror-activeline-background {
        background: rgba(0, 0, 0, 0);
    }

    .cm-s-inner .cm-keyword {
        color: rgba(199, 146, 234, 1);
    }

    .cm-s-inner .cm-operator {
        color: rgba(233, 237, 237, 1);
    }

    .cm-s-inner .cm-variable-2 {
        color: #80CBC4;
    }

    .cm-s-inner .cm-variable-3 {
        color: #82B1FF;
    }

    .cm-s-inner .cm-builtin {
        color: #DECB6B;
    }

    .cm-s-inner .cm-atom {
        color: #F77669;
    }

    .cm-s-inner .cm-number {
        color: #F77669;
    }

    .cm-s-inner .cm-def {
        color: rgba(233, 237, 237, 1);
    }

    .cm-s-inner .cm-string {
        color: #C3E88D;
    }

    .cm-s-inner .cm-string-2 {
        color: #80CBC4;
    }

    .cm-s-inner .cm-comment {
        color: #546E7A;
    }

    .cm-s-inner .cm-variable {
        color: #82B1FF;
    }

    .cm-s-inner .cm-tag {
        color: #80CBC4;
    }

    .cm-s-inner .cm-meta {
        color: #80CBC4;
    }

    .cm-s-inner .cm-attribute {
        color: #FFCB6B;
    }

    .cm-s-inner .cm-property {
        color: #80CBAE;
    }

    .cm-s-inner .cm-qualifier {
        color: #DECB6B;
    }

    .cm-s-inner .cm-variable-3 {
        color: #DECB6B;
    }

    .cm-s-inner .cm-tag {
        color: rgba(255, 83, 112, 1);
    }

    .cm-s-inner .cm-error {
        color: rgba(255, 255, 255, 1.0);
        background-color: #EC5F67;
    }

    .cm-s-inner .CodeMirror-matchingbracket {
        text-decoration: underline;
        color: white !important;
    }

    .cm-s-inner .cm-link,
    .cm-s-inner.cm-link {
        color: var(--link-color);
    }

    /**apply to code fences with plan text**/
    .md-fences {
        background-color: #263238;
        color: rgba(233, 237, 237, 1);
        border: none;
    }

    .md-fences .code-tooltip {
        background-color: #263238;
    }